<template>
	<view class="app">
		<view class="scroll-box" id="scroll-box">
			<scroll-view class="left" :scroll-into-view="leftIntoView" scroll-with-animation scroll-y >
				<view v-for="(item,index) in length" :id="'left-'+index" :class="['item' , index==leftTabIndex?'item-acitve': '']" @click="changeScroll(index)" :key="index">{{index}}</view>
			</scroll-view>
			
			<swiper class="right" vertical :duration="100" :current="leftTabIndex" @change="changeSwiper">
				<swiper-item class="swiper-item" v-for="(item,index) in length" :key="index">
					<scroll-view class="right-nav" :scroll-into-view="navView" scroll-with-animation scroll-x >
						<view v-for="(ite,ind) in length" :key="ind" class="item" :id="'nav-'+ind" :data-index="ind" @click="changeNav">
							<view :class="['item-label',ind==rightNavIndex? 'item-label-active':'']">{{ind}}</view>
						</view>
					</scroll-view>
					
					<scroll-view class="right-com" scroll-with-animation scroll-y @scrolltolower="scrolltolower" @scroll="mainScroll" :scroll-into-view="scrollInto">
						<view v-for="(ite,ind) in length" :key="ind" :class="['item','main-item-'+index] " :id="'item-'+ind">{{ind}} - 失败作品可供参考</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				scrollTopSize:0,
				scrollHeight:400,
				leftTabIndex: 0  ,// 左边的下标
				rightNavIndex:0,	// 右边nav下标
				length:10,
				topArr:[],
				scrollInto:'',
			}
		},
		mounted() {
			this.$nextTick(()=>{
				setTimeout(()=>{
					this.initScrollView().then(()=>{
						this.getElementTop();
					})
				},200);
			})
		},
		computed:{
			/* 计算左侧滚动位置定位 */
			leftIntoView(){
				return `left-${this.leftTabIndex > 3 ? (this.leftTabIndex-3):0}`;
			},
			navView(){
				return `nav-${this.rightNavIndex}`;
			}
		},
		methods:{
			/* 初始化滚动区域 */
			initScrollView(){
				return new Promise((resolve, reject)=>{
					let scroll = uni.createSelectorQuery().select('#scroll-box');
					scroll.boundingClientRect(res => {
						this.scrollTopSize = res.top;
						this.scrollHeight = res.height;
						this.$nextTick(()=>{
							resolve();
						})
					}).exec();
				});
			},
			// 点击左边的导航
			changeScroll(index){
				this.leftTabIndex = index
			},
			// 切换左边轮播
			changeSwiper(e){
				let index = e.detail.current
				this.leftTabIndex = index
				this.rightNavIndex = 0
				this.scrollInto='item-0';
				this.$nextTick(()=>{
					// console.log(index)
					setTimeout(()=>{
						this.getElementTop(index)
					},200)
					
				})
			},
			changeNav(e){
				let index=e.currentTarget.dataset.index;
				this.scrollInto=`item-${index}`;
				// this.rightNavIndex = index
			},
			scrolltolower(){
				console.log('触底')
			},
			/* 获取元素顶部信息 */
			getElementTop(index=0){
				new Promise((resolve,reject)=>{
					let view = uni.createSelectorQuery().selectAll(`.main-item-${index}`);
					view.boundingClientRect(data => {
						// console.log(data)
						resolve(data);
					}).exec();
				}).then((res)=>{
					let topArr = res.map((item)=>{
						return item.top - this.scrollTopSize-30;	/* 减去滚动容器距离顶部的距离 */
					});
					console.log(topArr)
					this.topArr = topArr;
				});
			},
			/* 主区域滚动监听 */
			mainScroll(e){
				let top =e.detail.scrollTop;
				let index=0;
				/* 查找当前滚动距离 */
				for(let i = (this.topArr.length-1);i>=0;i--){
					/* 在部分安卓设备上，因手机逻辑分辨率与rpx单位计算不是整数，滚动距离与有误差，增加2px来完善该问题 */
					if((top+2)>=this.topArr[i]){
						index = i;
						break;
					}
				}
				// console.log(index)
				this.rightNavIndex=(index < 0 ? 0: index);
			}
		}
	}
</script>

<style scoped lang="scss">
	page,.app{
		/* #ifdef H5 */
		height: 100%;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		height: 100vh;
		/* #endif */
	}
	.app{display: flex;flex-direction: column;justify-content: flex-start;align-items: center;
		&>view{
			width: 100%;
		}
		.scroll-box{flex: 1;height: 100%;display: flex;align-items: flex-start;
			.left{flex: none;width: 200rpx;background: #ededed;height: 100%;
				.item{height: 80rpx;padding-left: 20rpx;box-sizing: border-box;display: flex;align-items: center;border-bottom: 1px solid #ddd;
					&-acitve{background: #dfdfdf;}
				}
			}
			.right{flex: 1;background: red;height: 100%;
				.swiper-item{display: flex;flex-direction: column;
					.right-nav{height: 60rpx;background: #fff;white-space: nowrap;
						.item{display: inline-block;text-align: center;line-height: 60rpx;padding: 0 10rpx;
							.item-label{background: #ddd;min-width: 100rpx;border-radius: 10rpx;padding: 0 4rpx;box-sizing: border-box;
								&-active{background: red;color: #fff;}
							}
						}
					}
					.right-com{background-color: #fff;height: 1186rpx;
						.item{height: 500px;background: #ddd;padding-bottom: 10rpx;padding-left: 10rpx;
							&:nth-last-child(1){padding-bottom: 0;}
						}
					}
				}
			}
		}
	}
	
	.color{color: #73acf1;}
</style>
